<template>
    <div class="Order">
        <div class="Order__background"></div>
        <div class="Order__header">
            <span class="Order__header__back iconfont" @click="handlebackClick">&#xe60e;</span>
            <span class="Order__header__tlite">确认订单</span>
        </div>
        <div class="Order__site">
            <h3 class="Order__site__tlite">收货地址</h3>
            <div class="Order__site__details">
                <div class="Order__site__details__text">
                    <div class="Order__site__details__text__address">北京理工大学国防科技园2号楼10层</div>
                    <div class="Order__site__details__text__contactWay">
                        <span class="Order__site__details__text__contactWay__name">瑶妹（先生）</span>
                        <span class="Order__site__details__text__contactWay__number">18911024266</span>
                    </div>
                </div>
                <div class="iconfont Order__site__details__enter">&#xe649;</div>
            </div>
        </div>
        <OrderList :shopId="shopId"/>
        <div class="Order__footer">
            <div class="Order__footer__money">
                <span class="Order__footer__money__practical">实付金额</span>
                <span class="Order__footer__money__num">&yen;{{priceResult.price}}</span>
            </div>
            <div class="Order__footer__submit" @click="handleSubmitClick(true)">
                提交订单
            </div>
        </div>
    </div>
    <div class="mask" v-if="isHintMask" @click="handleSubmitClick(false)">
        <div class="mask__hintBox" @click.stop>
            <h3 class="mask__hintBox__tlite">确认要离开收银台？</h3>
            <div class="mask__hintBox__content">请尽快完成支付，否则将被取消</div>
            <div class="mask__hintBox__btns">
                <div class="mask__hintBox__btns__cancel" @click="handleAffirmClick(true)">取消订单</div>
                <div
                class="mask__hintBox__btns__affirm"
                @click="handleAffirmClick(false)"
                >确认支付</div>
            </div>
        </div>
    </div>
</template>

<script>
import OrderList from './orderList/OrderList.vue'
import '../../style/iconfont.css'
import { post } from '../../utils/axiosPost'
import { useRoute, useRouter } from 'vue-router'
import { useCommonCartEffect, useCommonAllListCartEffect } from '../../effects/cartEffects'
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
const orderCartListObj = () => {
  const router = useRouter()
  const route = useRoute()
  const shopId = route.params.id
  const { productList } = useCommonCartEffect(shopId)

  // 实付金额计算
  const priceResult = computed(() => {
    const product = productList.value
    let price = 0
    for (const j in product) {
      const productList = product[j]
      price += productList.count * productList.price
    }
    price = parseInt(price.toFixed(2), 10)
    return { price }
  })
  // 点击返回
  const handlebackClick = () => {
    router.back()
  }
  // 支付提示隐藏或者显示
  const isHintMask = ref(false)
  const handleSubmitClick = (isSubmit) => {
    isHintMask.value = isSubmit
  }
  return { priceResult, handlebackClick, shopId, isHintMask, handleSubmitClick }
}

// 想后端发送提交订单请求
const orderAffirmPostFn = (shopId) => {
  const { productList } = useCommonCartEffect(shopId)
  const { productListAllCount } = useCommonAllListCartEffect()
  const router = useRouter()
  const store = useStore()
  const handleAffirmClick = async (isCanceled) => {
    const shopName = productListAllCount.value[shopId].shopName
    const productObj = productList.value
    const shopIdnum = parseInt(shopId, 10)
    const products = []
    for (const i in productObj) {
      products.push({
        id: productObj[i]._id,
        num: parseInt(productObj[i].count, 10)
      })
    }
    for (const j in productListAllCount.value) {
      productListAllCount.value[j].isCanceled = isCanceled
    }
    try {
      const res = await post('/api/order', {
        addressId: 1,
        shopId: shopIdnum,
        shopName,
        isCanceled,
        products
      })
      if (!res.errno) {
        store.commit('emptyProductFn')
        router.push({ name: 'Order' })
      }
    } catch (e) {
      console.log(e)
    }
  }
  return { handleAffirmClick }
}
export default {
  name: 'ConfirmOrder',
  data () {
    return {
      isfirstChlied: true
    }
  },
  components: { OrderList },
  setup () {
    const { priceResult, handlebackClick, shopId, isHintMask, handleSubmitClick } = orderCartListObj()
    const { handleAffirmClick } = orderAffirmPostFn(shopId)
    return { priceResult, handlebackClick, handleAffirmClick, handleSubmitClick, isHintMask, shopId }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/colorValue.scss';
@import '../../style/mixinApi.scss';
.cartList {
  width: 100%;
  @include positionFn();
  top: 1.98rem;
  bottom: 0;
  background: $deepWhiteColor;
  margin:0;
  padding:0;
  overflow-y: auto;
  list-style: none;
}
.Order {
    background: $deepWhiteColor;
    position: absolute;
    top: 0;
    @include positionFn();
    z-index: -2;
    &__background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1.58rem;
        z-index: -1;
        background-image: linear-gradient(0deg, rgba(0,145,255,0.00) 4%, #0091FF 50%);
    }
    &__header {
        margin:.245rem .18rem .22rem .18rem;
        text-align: center;
        position: relative;
        &__back,&__tlite {
            color: $whiteColor;
            line-height: .22rem;
        }
        &__tlite {
            font-size: .16rem;
        }
        &__back {
            display: inline-block;
            font-size: .22rem;
            position: absolute;
            left: 0;
        }
    }
    &__site {
        margin:0 .18rem;
        height: 1.11rem;
        background: $whiteColor;
        border-radius: .04rem;
        box-sizing: border-box;
        padding:.16rem;
        &__tlite {
            padding-bottom: .14rem;
            margin:0;
            font-size: .16rem;
            color: $TextColor;
        }
        &__details {
            display: flex;
            justify-content: space-between;
            &__enter {
                font-size: .16rem;
                color:$TextColor;
            }
            &__text {
                &__address {
                    font-size: .14rem;
                    color: $TextColor;
                    line-height: .2rem;
                    padding-bottom: .06rem;
                }
                &__contactWay {
                    font-size: .12rem;
                    color: $sixColor;
                    line-height: .17rem;
                    &__name {
                        display: inline-block;
                        padding-right: .06rem;
                    }
                }
            }
        }
    }
    &__footer {
        height: .49rem;
        position: fixed;
        bottom: 0;
        left: 0;
        right:0;
        line-height: .49rem;
        display: flex;
        justify-content: space-between;
        &__money {
            padding-left: .24rem;
            &__practical {
                font-size: .14rem;
                color: $TextColor;
                line-height: .2rem;
                padding-right:.05rem;
            }
            &__num {
                font-size: .16rem;
                color: $TextColor;
                line-height: .22rem;
                font-weight: bold;
            }
        }
        &__submit {
                width: .98rem;
                height: 100%;
                background: #4FB0F9;
                color:#ffffff;
                text-align: center;
            }
    }
}
.mask {
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    background: rgba(0,0,0,0.50);
    &__hintBox {
        height: 1.57rem;
        margin:2.43rem .37rem 0 .37rem;
        background: $whiteColor;
        border-radius: .04rem;
        text-align: center;
        &__tlite {
            font-size: .18rem;
            color: $TextColor;
            padding:.24rem 0 .08rem 0;
            line-height: .25rem;
            margin:0;
        }
        &__content {
            font-size: .14rem;
            color: $sixColor;
            padding-bottom: .24rem;
            line-height: .2rem;
        }
        &__btns {
            display: flex;
            justify-content: space-between;
            width: 1.84rem;
            margin:0 auto;
            &__cancel,&__affirm {
                width: .8rem;
                height: .32rem;
                font-size: .14rem;
                text-align: center;
                line-height: .32rem;
                border: .01rem solid $blueDeepColor;
                border-radius: .16rem;
            }
            &__cancel {
                color: $blueColor;
            }
            &__affirm {
                background: $blueDeepColor;
                color:$whiteColor;
            }
        }
    }
}
</style>
